<template>
    <section class="copyBoxBClass flex justify-center align-center flex-direction">
        <div class="subscribeBox flex justify-center align-center padding-bottom-x">
            <div class="subscribeCoreBox">
                <vs-input @keyup.enter.native="subscribeHandler" primary type="text" v-model="email"
                    label-placeholder="请输入需要订阅的邮箱" icon-after @click-icon="subscribeHandler" style="flex:1 1 auto;">
                    <template #icon>
                        <i class='bx bx-search'></i>
                    </template>
                </vs-input>
            </div>
        </div>
        <div class="webCopyBox flex justify-center align-center padding-bottom-xs">
            <div class="copyCoreText">© Copyright {{ new Date().getFullYear() }} | Qianbei Mountain Person. All Rights
                Reserved . <span class="safewincontentclass">黔北山人™ ®版权所有.</span></div>
        </div>
        <div class="friendlyBox flex justify-center align-center padding-bottom-xs">
            <div v-for="(f, fi) in frendlyData" :key="f.id" class="friendItem flex justify-center align-center">
                <a :href="f.sys_links" target="_blank" class="flex justify-center align-center">
                    <span>{{ f.sys_name }}</span>
                    <div v-if="fi < frendlyData.length - 1" class="line-y" style="height:10px;"></div>
                </a>
            </div>
        </div>
        <div class="ICPBox flex justify-center align-end">
            <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">{{ webconfig.web_copy }}</a>
        </div>
    </section>
</template>

<script>
import { Ads } from '../assets/inc/tencentAds';
import { scrollTop, extendsEncrypte, extendsParams } from '~/assets/inc/common';
import { apis } from '~/assets/inc/apis.js';
import { returnCity } from '~/assets/inc/city';
export default {
    props: {
        webconfig: {
            type: Object,
            default: {}
        },
        frendlyData: {
            type: Array,
            default: []
        },
        menuDatas: {
            type: Array,
            default: []
        },
        questionsData: {
            type: Array,
            default: []
        },
        bussinessData: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            showQrStatus: false,//二维码显示状态
            cityName: '',
            Ads: Ads,
            email: '',
        }
    },
    mounted() {
        // this.cityName = returnCity(returnCitySN.cname);
    },
    methods: {
        //订阅
        async subscribeHandler() {
            if (!this.email) {
                this.$vs.notification({
                    progress: 'auto',
                    color: 'danger',
                    position: 'bottom-center',
                    title: 'Web Message!',
                    text: "请输入订阅邮箱"
                })
                return;
            }
            if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email)) {
                this.$vs.notification({
                    progress: 'auto',
                    color: 'danger',
                    position: 'bottom-center',
                    title: 'Web Message!',
                    text: "邮箱格式错误，请核查!"
                })
                return;
            }
            const { email } = this;
            extendsEncrypte({ email, status: 1 }, this.$axios);
            const res = await this.$axios.post(apis.subscribeAPI, extendsParams({ email, status: 1 }));
            this.$vs.notification({
                progress: 'auto',
                color: res.data.code == 200 ? 'success' : 'danger',
                position: 'bottom-center',
                title: 'Web Message!',
                text: res.data.message
            })
        },
        /**
         * 回到顶部
         */
        scrollTopHandle() {
            scrollTop(window);
        },
    }
}
</script>

<style lang="scss" scoped>
.copyBoxBClass {
    width: 100%;
    padding-bottom: 50px;

    .adBox {
        width: 1200px;

        img {
            border-radius: 20px;
        }
    }

    .subscribeBox {
        padding-top: 50px;
        color: var(--black);

        .subscribeCoreBox {
            width: 300px;
        }
    }

    .linkBox {
        padding-top: 20px;

        .linkItem {
            color: var(--black);
        }

        span {
            padding: 0 5px;
        }
    }

    .webCopyBox {
        width: 100%;

        img {
            height: 40px;
            width: auto;
        }

        .copyWebname {
            padding-left: 10px;
        }

        .copyCoreText {
            color: #b8b8b8;
            padding-left: 10px;
        }
    }

    .friendlyBox {

        .friendTitle {
            font-weight: bold;
            color: var(--gray);
        }

        .friendItem {
            a {
                color: var(--gray);
            }
        }

        span {
            padding: 0 10px;
        }
    }

    .ICPBox {
        width: 100%;
        color: var(--gray);

        a {
            color: #b8b8b8;
        }
    }
}

@media screen and (min-width:0px) and (max-width:1280px) {
    .copyBoxBClass {
        width: 100%;
        padding-bottom: 5rem;

        .adBox {
            width: 100%;

            img {
                border-radius: 0;
            }
        }

        .subscribeBox {
            padding-top: 5rem;
            color: var(--black);

            .subscribeCoreBox {
                width: 20rem;
            }
        }

        .linkBox {
            padding-top: 2rem;
            display: none;

            .linkItem {
                color: var(--black);
            }

            span {
                padding: 0 0.5rem;
            }
        }

        .webCopyBox {
            width: 100%;
            height: auto;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                height: 4rem;
                width: auto;
                margin-top: 3rem;
                margin-bottom: 1rem;
            }

            .copyWebname {
                padding-left: 1rem;
            }

            .copyCoreText {
                color: #b8b8b8;
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                padding-top: 1rem;
                padding-left: 0;

                span {
                    padding-top: 3rem;
                }
            }
        }

        .friendlyBox {
            padding-top: 3rem;
            padding-bottom: 1rem;
            display: none;
            font-size: 1rem;

            .friendTitle {
                font-weight: bold;
                color: var(--gray);
            }

            .friendItem {
                a {
                    color: var(--gray);
                }
            }

            span {
                padding: 0 1rem;
            }
        }

        .ICPBox {
            width: 100%;
            height: 3rem;
            color: var(--gray);
        }
    }
}
</style>
<style lang="scss">
@media screen and (min-width:0px) and (max-width:1280px) {}
</style>